import React, { useState, useEffect } from 'react';
import { userService } from '../../services/user';
import UserLayout from './UserLayout';
import PaginationComponent from '../network/NetworkHome/components/PaginationComponent.js';
import './InvitationHistory.css';

const InvitationHistory = () => {
  const [invitationHistory, setInvitationHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [pagination, setPagination] = useState({
    current: 1,
    size: 2,
    total: 0,
  });

  useEffect(() => {
    fetchInvitationHistory();
  }, [pagination.current, pagination.size]);

  const fetchInvitationHistory = async () => {
    try {
      setLoading(true);
      const response = await userService.getInvitationHistory({
        current: pagination.current,
        size: pagination.size,
      });

      if (response.data.code === 200) {
        setInvitationHistory(response.data.data.records);
        setPagination(prev => ({
          ...prev,
          total: response.data.data.total,
        }));
      }
    } catch (err) {
      setError('获取邀请记录失败');
    } finally {
      setLoading(false);
    }
  };

  const handlePageChange = (page, pageSize) => {
    setPagination(prev => ({
      ...prev,
      current: page,
      size: pageSize,
    }));
  };

  if (loading) {
    return (
      <UserLayout>
        <div className="content-loading">加载中...</div>
      </UserLayout>
    );
  }

  return (
    <UserLayout>
      <div className="invitation-content">
        <div className="content-header">
          <h2 className="content-title">邀请记录</h2>
        </div>
        
        {error && <div className="error-message">{error}</div>}

        {invitationHistory.length > 0 ? (
          <div className="invitation-section">
            <div className="invitation-list">
              {invitationHistory.map((record) => (
                <div key={record.userId} className="invitation-card">
                  <div className="user-avatar">
                    <img src={record.avatarUrl} alt={record.username} />
                  </div>
                  <div className="user-info">
                    <div className="info-row">
                      <label>用户名</label>
                      <p>{record.username}</p>
                    </div>
                    <div className="info-row">
                      <label>邮箱</label>
                      <p>{record.email}</p>
                    </div>
                    <div className="info-row">
                      <label>注册时间</label>
                      <p>{new Date(record.createdAt).toLocaleString()}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="pagination-container">
              <PaginationComponent
                current={pagination.current}
                pageSize={pagination.size}
                total={pagination.total}
                onChange={handlePageChange}
              />
            </div>
          </div>
        ) : (
          <div className="no-data-container">
            <p className="no-data-message">暂无邀请记录</p>
          </div>
        )}
      </div>
    </UserLayout>
  );
};

export default InvitationHistory; 